<script setup lang="ts">
  import { Button } from '@renderer/components/ui/button'
  import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger
  } from '@renderer/components/ui/dialog'
  import { Input } from '@renderer/components/ui/input'
  import { Label } from '@renderer/components/ui/label'
  import { useUserStore } from '@renderer/store/modules/user.store'

  const userStore = useUserStore()

  function login() {
    userStore.login({
      name: 'Pedro Duarte',
      email: 'peduarte@example.com',
      avatar: 'https://github.com/peduarte.png'
    })
  }
</script>

<template>
  <Dialog>
    <DialogTrigger as-child>
      <button class="icon-btn">
        <i class="i-mynaui-user-circle"></i>
      </button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-[425px]">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you're done.
        </DialogDescription>
      </DialogHeader>
      <div class="py-4 gap-4 grid">
        <div class="gap-4 grid grid-cols-4 items-center">
          <Label for="name" class="text-right"> Name </Label>
          <Input id="name" value="Pedro Duarte" class="col-span-3" />
        </div>
        <div class="gap-4 grid grid-cols-4 items-center">
          <Label for="username" class="text-right"> Username </Label>
          <Input id="username" value="@peduarte" class="col-span-3" />
        </div>
      </div>
      <DialogFooter>
        <Button type="submit" @click="login"> login </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
